import React, { FC } from 'react';
import { Navigate } from 'react-router-dom';
import { adminRoutes, AdminRouter } from './routes'
import { Frame } from './components'

import { useRecoilValue } from 'recoil';
import { userState } from './store'

import { ConfigProvider } from 'antd';
// import './App.css';

// 获取导航菜单
const menus = adminRoutes.filter(route => route.isNav === true)

const App: FC = () => {
  const lang = useRecoilValue(userState.langAtom);
  const isLogin = useRecoilValue(userState.loginAtom);
  // console.log(isLogin)

  return (
    <ConfigProvider locale={ lang }>
    {
      isLogin
      ?
      // 方式一：Outlet
      // <Routes>
      //   <Route path='/' element={<Frame menus={menus} />}>
      //   {
      //     adminRoutes.map((route: any) => {
      //       return <Route key={route.path} path={route.path} element={route.component} />
      //     })
      //   }
      //   </Route>
      // </Routes>

      // 方式二：children
      <Frame menus={menus} >
        <AdminRouter />
      </Frame>
      :
      <Navigate to={'/'} />
    }
    </ConfigProvider>
  );
}

export default App;
